<template>
  <div class="block">
    <el-date-picker
      v-model="value"
      type="daterange"
      align="right"
      unlink-panels
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions"
    >
    </el-date-picker>
    <div class="btn">
      <el-button icon="el-icon-search" circle @click="queryData"></el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value: "",
    };
  },
  methods: {
    queryData() {
      // let start = this.$moment(this.value[0]).format("YYYY-MM-DD HH:mm:ss");
      // let end = this.$moment(this.value[1]).format("YYYY-MM-DD HH:mm:ss");
      let start = this.$moment(this.value[0]).format("YYYY-MM-DD");
      let end = this.$moment(this.value[1]).format("YYYY-MM-DD");
      console.log("emit被触发了");
      this.$emit("query", start, end);
    },
  },
};
</script>

<style>
/* .block {
  width: 100%;
  height: 50px;
  text-align: center;
  float: left;
}*/
.btn {
  margin-left: 10px;
  display: inline-block;
}
</style>